<!--
 @Description 网格布局
 @author hemengxia
 @date 2022/10/20
-->

<template>
  <section
    class="v-grid-view-content"
    :style="{
      'margin-top': top,
      'background-color': option.bgcolor,
      'background-image': `url(${imgBg})`,
      'background-repeat': 'no-repeat',
      'background-size': '100% 100%',
      'background-position': 'top center',
    }"
  >
    <cell-title
      v-if="isShowModuleName || option.isMore === '1'"
      :title="moduleName"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        'background-color': backgroundColor,
        'border-radius': radiusSize + ' ' + radiusSize + ' 0 0',
      }"
    />
    <div class="v-grid-view-box">
      <template v-if="showType === '1' && list.length > 0">
        <div class="v-grid-content one">
          <v-grid-item :obj="list[0]" :style-type="'style-one'" />
        </div>
      </template>
      <template v-else-if="showType === '2'">
        <div class="v-grid-content two">
          <v-grid-item
            v-if="list.length > 0"
            :obj="list[0]"
            :style-type="'style-two'"
          />
          <v-grid-item
            v-if="list.length > 1"
            :obj="list[1]"
            :style-type="'style-two'"
          />
        </div>
      </template>
      <template v-else-if="showType === '3' && list.length > 0">
        <div class="v-grid-content three">
          <div class="three-left">
            <v-grid-item
              v-if="list.length > 0"
              :obj="list[0]"
              :style-type="'style-three-left'"
            />
          </div>
          <div class="three-right">
            <v-grid-item
              v-if="list.length > 1"
              :obj="list[1]"
              :style-type="'style-three-right'"
            />
            <v-grid-item
              v-if="list.length > 2"
              :obj="list[2]"
              :style-type="'style-three-right'"
            />
          </div>
        </div>
      </template>
      <template v-else-if="showType === '4' && list.length > 0">
        <div class="v-grid-content four">
          <div class="four-left">
            <v-grid-item
              v-if="list.length > 0"
              :obj="list[0]"
              :style-type="'style-four-left'"
            />
          </div>
          <div class="four-right">
            <v-grid-item
              v-if="list.length > 1"
              :obj="list[1]"
              :style-type="'style-four-right-top'"
            />
            <div class="four-right-bottom">
              <v-grid-item
                v-if="list.length > 2"
                :obj="list[2]"
                :style-type="'style-four-right-bottom'"
              />
              <v-grid-item
                v-if="list.length > 3"
                :obj="list[3]"
                :style-type="'style-four-right-bottom'"
              />
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="showType === '5' && list.length > 0">
        <div class="v-grid-content five">
          <div class="five-left">
            <div class="five-left-row">
              <v-grid-item
                v-if="list.length > 0"
                :obj="list[0]"
                :style-type="'style-five-left'"
              />
              <v-grid-item
                v-if="list.length > 1"
                :obj="list[1]"
                :style-type="'style-five-left'"
              />
            </div>
            <div class="five-left-row">
              <v-grid-item
                v-if="list.length > 2"
                :obj="list[2]"
                :style-type="'style-five-left'"
              />
              <v-grid-item
                v-if="list.length > 3"
                :obj="list[3]"
                :style-type="'style-five-left'"
              />
            </div>

          </div>
          <div class="five-right">
            <v-grid-item
              v-if="list.length > 4"
              :obj="list[4]"
              :style-type="'style-five-right'"
            />
          </div>
        </div>
      </template>
      <template v-else-if="showType === '6' && list.length > 0">
        <div class="v-grid-content six">
          <ul>
            <li v-for="(item, index) in list" v-if="index < 6" :key="index">
              <v-grid-item :obj="item" :style-type="'style-six'" />
            </li>
          </ul>
        </div>
      </template>
      <template v-else-if="showType === '10' && list.length > 0">
        <div class="v-grid-content ten">
          <div class="ten-right">
            <v-grid-item
              v-if="list.length > 0"
              :obj="list[0]"
              :style-type="'style-ten-right'"
            />
          </div>
          <div class="ten-left">
            <div class="ten-left-row">
              <v-grid-item
                v-if="list.length > 1"
                :obj="list[1]"
                :style-type="'style-ten-left'"
              />
              <v-grid-item
                v-if="list.length > 2"
                :obj="list[2]"
                :style-type="'style-ten-left'"
              />
            </div>
            <div class="ten-left-row">
              <v-grid-item
                v-if="list.length > 3"
                :obj="list[3]"
                :style-type="'style-ten-left'"
              />
              <v-grid-item
                v-if="list.length > 4"
                :obj="list[4]"
                :style-type="'style-ten-left'"
              />
            </div>
          </div>
        </div>
        <div
          class="v-grid-content ten"
        >
          <div class="ten-left">
            <div class="ten-left-row">
              <v-grid-item
                v-if="list.length > 5"
                :obj="list[5]"
                :style-type="'style-ten-left'"
              />
              <v-grid-item
                v-if="list.length > 6"
                :obj="list[6]"
                :style-type="'style-ten-left'"
              />
            </div>
            <div class="ten-left-row">
              <v-grid-item
                v-if="list.length > 7"
                :obj="list[7]"
                :style-type="'style-ten-left'"
              />
              <v-grid-item
                v-if="list.length > 8"
                :obj="list[8]"
                :style-type="'style-ten-left'"
              />
            </div>

          </div>
          <div class="ten-right">
            <v-grid-item
              v-if="list.length > 9"
              :obj="list[9]"
              :style-type="'style-ten-right'"
            />
          </div>
        </div>
      </template>
      <template v-else>
        <van-skeleton title :row="1" />
      </template>
    </div>
  </section>
</template>
<script>
import VGridItem from '@/components/CustomPage/apps/widget/vGridview/vGridItem.vue'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
import mixins from './../mixins'

export default {
  name: 'VGridView',
  components: { VGridItem, CellTitle },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }

  },
  provide() {
    return {
      isShowTitle: () => this.isShowTitle,
      isShowSubtitle: () => this.isShowSubtitle,
      imgShowType: () => this.imgType,
      itemBgColor: () => this.itemBgColor
    }
  },
  data() {
    return {
      defaultList: [
        {
          imgId: '',
          imgUrl: '',
          title: '第一个标题',
          subtitle: '第一个副标题'
        },
        {
          imgId: '',
          imgUrl: '',
          title: '第二个标题',
          subtitle: '第二个副标题'
        },
        {
          imgId: '',
          imgUrl: '',
          title: '第三个标题',
          subtitle: '第三个副标题'
        },
        {
          imgId: '',
          imgUrl: '',
          title: '第四个标题',
          subtitle: '第四个副标题'
        }, {
          imgId: '',
          imgUrl: '',
          title: '第五个标题',
          subtitle: '第五个副标题'
        }, {
          imgId: '',
          imgUrl: '',
          title: '第六个标题',
          subtitle: '第六个副标题'
        },
        {
          imgId: '',
          imgUrl: '',
          title: '第七个标题',
          subtitle: '第七个副标题'
        },
        {
          imgId: '',
          imgUrl: '',
          title: '第八个标题',
          subtitle: '第八个副标题'
        },
        {
          imgId: '',
          imgUrl: '',
          title: '第九个标题',
          subtitle: '第九个副标题'
        },
        {
          imgId: '',
          imgUrl: '',
          title: '第十个标题',
          subtitle: '第十个副标题'
        }
      ],
      list: []
    }
  },
  computed: {

    // 展示方式
    showType() {
      return this.option.showType || '1'
    },
    // 是否展示标题
    isShowTitle() {
      return this.option.isShowTitle
    },
    // 是否展示副标题
    isShowSubtitle() {
      return this.option.isShowSubtitle
    },
    // 模块名称
    moduleName() {
      return this.option.moduleName || ''
    },
    // 背景图片
    imgBg() {
      return this.option.imgBg
    }, // 单元背景颜色
    itemBgColor() {
      return this.option.itemBgColor || '#C9C9C9'
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      // for (let i = 0; i <this.defaultList.length ; i++) {
      //   this.defaultList[i].imgUrl='https://img2.baidu.com/it/u=617579813,2960860841&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1671296400&t=197c8f6003a95b67181e2bfbeb81131d'
      // }
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.list = result.dataList.data || []
    }
  }
}
</script>
<style lang="scss">
@import "@/styles/utility/rem.scss";

.v-grid-view-content {
  .module-name {
    color: #333;
    font-size: rem(30);
    padding: rem(24) rem(24);
    font-weight: bold;
    text-align: left;
    margin: 0;
  }

  .v-grid-view-box {
    padding: rem(24);
    // background: linear-gradient(0deg, #f7f8f9 0%, #ffffff 99%);
    margin: 0 auto;
    border-radius: rem(16);

    .v-grid-content {
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &.one {
        justify-content: center;
      }

      &.three {
        .three-right {
          height: rem(400);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
        }
      }

      &.four {
        .grid-item-title {
          font-size: rem(28);
        }

        .grid-item-subtitle {
          font-size: rem(22);
        }

        .four-right {
          height: rem(362);
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;

          .four-right-bottom {
            width: rem(432);
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
          }
        }
      }

      &.five {
        .grid-item-title {
          font-size: rem(26);
        }

        .grid-item-subtitle {
          font-size: rem(22);
        }

        .five-left {
          width: rem(508);
          height: rem(250);
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          flex-direction: column;

          .five-left-row {
            width: rem(508);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
          }
        }

        .five-right {
          height: rem(250);
        }
      }

      &.six {
        > ul {
          height: rem(340);
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
        }
      }

      &.ten {
        &:first-child {
          margin-bottom: rem(20);
        }

        .grid-item-title {
          font-size: rem(26);
        }

        .grid-item-subtitle {
          font-size: rem(22);
        }

        .ten-left {
          width: rem(508);
          height: rem(250);
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          flex-direction: column;

          .ten-left-row {
            width: rem(508);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
          }
        }

        .ten-right {
          height: rem(250);
        }
      }
    }
  }
}
</style>
